<template>
	<div class="mineCollect-box">
		<ZxyhHeader v-if="getPlatform='app'" :title="'我的收藏'" :isClose='false'></ZxyhHeader>
		<div  v-else class="mineCollect-box-title">
			<div class="back" v-if="isBack" @click="comeBack"></div>
			<p>我的收藏</p>
		</div>
		<!--没有收藏-->
		<div class="noCollect-box" v-if="shouCangList.length<1">
			<i></i>
			<p>您还没有收藏过视频哦～</p>
		</div>
		<ul v-else class="collect-box">
			<li v-for="(v,index) of shouCangList"  @click="linkLookBack(v.vid)" :key="index">
				<img class="mineCollect-img" :src="v.imagUrl+'?x-oss-process=image/resize,m_fixed,h_188,w_330'"/>
				<div class="mineCollect-right">
					<p class="mineCollect-tip">{{v.title}}</p>
					<p class="mineCollect-name">{{v.orgName}}</p>
				</div>
				
			</li>
		</ul>
	</div>
</template>
<script>
import ZxyhHeader from '@/components/zxyh/zxyhHeader'
	export  default{
		components:{
		 ZxyhHeader
		},
		data(){
			return {
			  shouCangList: [],
			  page:1,
			  flag:true,
			  isBack:false,//返回按钮显示不显示
			  getPlatform:fun.getPlatform() //app wx
			}
		},
		created:function(){
          this.getShouCangList();
          var ua = navigator.userAgent.toLowerCase();
		  this.isBack = (/MicroMessenger/i).test(ua) //true 微信
		},
		 mounted:function(){
		 	    this.$store.dispatch("hideNav");
		 	    let  _this = this ;
		 	 	window.onscroll = function () {		 	 	
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//293
					//console.log(scrollTop)
				let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;//667				
				let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //960
				if(scrollTop + windowHeight >= scrollHeight && _this.flag){
				    _this.page++
                 _this.$http.post("/h5live/getScList?p="+_this.page).then(
		           res => {
		             //console.log(res.data.data)
		             if(res.data.code == "000000"){
		             	  let shouCangData = res.data.data;
		             	  //console.log(res.data.data.length)
		             	  if(res.data.data.length == 0){
		             	  	 _this.flag = false
		             	  }
		             	  	for(var i = 0; i < shouCangData.length; i++) {
							    _this.shouCangList.push(shouCangData[i]);
						      }
		             }

		           },
		        err => {}
		      );
				}
			}
        },
		  methods:{
		  	getShouCangList: function() {
		      let _this = this;
		      _this.$http.post("/h5live/getScList?p="+_this.page).then(
		        res => {
		          //console.log(res.data.data)
		          if(res.data.data.length){
		          	 _this.shouCangList= res.data.data;		          	
		          }
		        },
		        err => {}
		      );
		    },
		    linkLookBack(vid){
		    	this.$router.push(`/${this.$channel}/liveBack/${vid}?dzhPage=true`);
		    },
		    comeBack(){
		    	let  statuesNum = window.sessionStorage.getItem(this.$channel+"_mineCollectNum")
		    	if(statuesNum=='2'){
		    		this.$router.push(`/${this.$channel}/mine`);
		    	}else if(statuesNum=='1'){
		    		this.$router.push(`/${this.$channel}/home`);
		    	}else{
		    		this.$router.push(`/${this.$channel}/home`);
		    	}
		    }
     }
	}
</script>
<style scoped="scoped">
	.mineCollect-box{
		width: 100vw;
		height: 100vh;
		background:white;
		overflow-y: hidden;
	}
	.collect-box{
		border-top: 1px solid #EEEEEE;
	}
	.mineCollect-box .header-conatiner-zxyhIos + ul{
     height: calc(100vh - 148px);
	}
	.mineCollect-box ul{
		width: 100vw;
		height: calc(100vh - 80px);
		overflow-y: scroll;
		padding:34px 27px;
	}
	.mineCollect-box ul li{
		display: flex;
		flex-direction: row;
		width: 100%;
		margin-bottom: 27px;
	}
	.mineCollect-img{
		width: 330px;
		height: 188px;
		margin-right: 20px;
		border-radius: 24px;
	}
	.mineCollect-right{
		/* margin-left: 310px; */
		width: calc(100% - 350px);
	}
	.mineCollect-tip{
		width: 100%;
		margin-bottom: 6px;
        font-size: 30px;
		font-weight: 400;
		color: #333333;
		line-height: 42px;
		letter-spacing: 1px;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	.mineCollect-name{
		font-size: 28px;
		font-weight: 400;
		color: #ACACAC;
		line-height: 40px;
		letter-spacing: 1px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;  /* 超出n行这里写n */
		-webkit-box-orient: vertical;
	}
	.mineCollect-box-title{
		position: relative;
	}
      .back{
      	width: 65px;
		height: 55px;
		background: url(../../assets/images/iconsmall.png) no-repeat;
		background-size: 150px  150px;
		position: absolute;
		top: 20px;
		left: 40px;
      }
	  .mineCollect-box-title p{
	  	width: 100%;
	  	height: 80px;
	  	font-size: 36px;
	  	text-align: center;
	  	line-height: 80px;
	  	color: #333333;
	  }
	/* 无数据 */
	.noCollect-box{
		position: absolute;
		top: 450px;
		left: 210px;	
	}
	.noCollect-box i{
		display: block;
		height: 326px;
		width: 326px;
		margin-bottom: 20px;
		background: url('../../assets/images/zxyh/my/collect1.png') no-repeat;
		background-size: 326px 326px;
	}
	.noCollect-box p{
		font-size: 30px;
		color: #999999;
		letter-spacing: 1px;
	}
</style>